<template>
  <div>
    <div class="title">
          <div class="twohig">现场验收</div>
          <div class="twohigno"></div>
    </div>
    <el-form ref="form" :model="form" label-width="100px" :rules="rules" >
      <el-row>
        <el-col :span="24">
          <el-form-item label="验收说明" prop="checkContent">
            <el-input v-model="form.checkContent" type="textarea" placeholder="请输入验收说明说明"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="验收附件">
            <ElUplod @getuplodimg="getuplodimg" :fileList="fileList"></ElUplod>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
          <el-col :span="12">
            <el-form-item label="验收情况" prop="checkType">
                <el-select v-model="form.checkType" size="small" filterable style="width: 100%;" >
                  <el-option label="通过" :value="0" ></el-option>
                  <el-option label="不通过" :value="1" ></el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="验收时间" prop="checkDate">
                <el-input v-model="form.checkDate" size="small" placeholder="自动生成" :disabled="true"></el-input>
              </el-form-item>
          </el-col>
      </el-row>
      <el-row >
          <el-col :span="12">
            <el-form-item label="验收人" prop="checkUserName">
                <el-input v-model="form.checkUserName" size="small" placeholder="自动生成" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
      </el-row>
    </el-form>
    <div class="dialog-footer" v-if="formdata.state==2">
      <span>
        <el-button size="small" type="primary"  @click="sureyanshou">验 收</el-button>
        <el-button size="small" @click="quxiao">取 消</el-button>
      </span>
    </div>
  </div>
</template>
<script>
import {base64ToFile,base64ToBlob} from '@/utils/tofile'
import {postimguplodapi,postyanshouapi,getarrdefectimgapi} from '@/api/system/defectManage'
import { getloginuserapi } from '@/api/cycle'
import dayjs from 'dayjs'
import ElUplod from './elupload'
export default {
  name: 'CallPoliceIndex',
  components: {
    ElUplod
  },
  props: {
    xiaoandyanlist: {
      type: Array,
      default:()=>[]
    },
    formdata: {
      type: Object,
      default:()=>{}
    },
    active: {
      type:Number,
    }
  },
  data() {
    return {
      isshow:false,
      form: {checkType:0},
      fileList: [],
      rules: {
        checkContent: [{ required: true, message: '请输入验收说明', trigger: 'blur' }],
        checkType: [{ required: true, message: '请选择验收情况', trigger: 'change' }],
        checkDate: [{ required: true, message: '请选择验收时间', trigger: 'blur' }],
        checkUserName: [{ required: true, message: '请输入验收人', trigger: 'blur' }],
      }
    }
  },

  async mounted() {

  },

  methods: {
    async tolook(row, flag) {
      this.isshow=flag
      this.$set(this.form,'checkContent',row.checkContent)
      this.$set(this.form,'checkType',row.checkType)
      this.$set(this.form,'checkDate',row.checkDate)
      this.$set(this.form,'checkUserName',row.checkUserName)
      this.$set(this.form, 'checkUserCode', row.checkUserCode)
      const { data: { list } } = await getarrdefectimgapi({ id: row.id, type: 2 })
      list.forEach(ele => {
        this.fileList.push({
          raw: new File([base64ToBlob('data:image/jpeg;base64,' + ele.fileData)], ele.fileName),
          url:'data:image/jpeg;base64,'+ele.fileData,
          name:ele.fileName
        })
      })
    },
    // 验收
    async sureyanshou() {
      await this.$refs.form.validate()
      let formData = new FormData();  
      this.fileList.forEach(ele => {
        formData.append('uploadFile', ele.raw)
      })
      const { data: { entity: checkPictureIds } } = await postimguplodapi(formData)
      await postyanshouapi({ checkPictureIds, ...this.form, id: this.formdata.id }).then(res => {
        this.$emit('tosuccess',res,'验收成功')
      })
    },
    async look() {
      const { data: { entity: userinfo } } = await getloginuserapi()
      this.$set(this.form,'checkDate',dayjs().format('YYYY-MM-DD HH:mm:ss'))
      this.$set(this.form,'checkUserName',userinfo.userName)
      this.$set(this.form,'checkUserCode',userinfo.userNo)
    },
    getuplodimg(fileList) {
      this.fileList=fileList
    },
    quxiao() {
      this.fileList=[]
      this.$refs.form.resetFields()
      this.form = this.$options.data().form
      this.isshow = false
      this.form =  {checkType:0}
      this.$emit('toquxiao')
    }
  }
}
</script>
<style lang="scss" scoped>
.title {
  color: #1890ff;
  height: 32px;
  display: flex;
  margin-bottom: 20px;
  .twohig {
    width: 80px;
    line-height: 32px;
    text-align: center;
    border: 1px solid #ccc;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
  }
  .twohigno {
    flex: 1;
    height: 32px;
    border-bottom: 1px solid #ccc;
  }
}
.dialog-footer{
  text-align: center;
}
</style>
